<main class="h-[calc(100vh_-_2.5rem)]">
  <%= lookbook_render :split_layout,
    id: "inspector",
    alpine_data: "$store.layout.inspector",
    "x-bind:class": "($store.inspector.drawer.hidden || #{@drawer_panels.none?}) && '!grid-rows-[1fr] !grid-cols-[1fr]'",
    data: {
      "preview-target": @target.id
    } do |layout| %>

    <%= layout.with_pane class: "flex flex-col h-full overflow-hidden",
      "x-effect": "forceOrientation = (layoutWidth < $store.inspector.minVerticalSplitWidth) ? 'horizontal' : null" do %>
    
      <%= lookbook_render :toolbar, id: "main-toolbar" do |toolbar| %>
        <% toolbar.with_section "x-bind:class": "layoutResizing && 'overflow-hidden'" do %>
          <%= lookbook_render :tabs, alpine_data: "$store.inspector.main", id: "inspector-tabs-main" do |tabs| %>
            <%= @main_panels.each do |panel| %>
              <% tabs.with_tab name: panel.name,
                label: panel.label,
                hotkey: panel.hotkey,
                disabled: panel.disabled %>
            <% end %>
          <% end %>
        <% end %>

        <% toolbar.with_section align: :right, class: "flex-none" do %>
          <% if @dynamic_display_options.any? %>
            <%= lookbook_render "display_options/editor" do |editor| %>
              <% @dynamic_display_options.each do |key, opts| %>
                <% editor.with_field name: key, opts: opts, value: @static_display_options[key] %>
              <% end %>
            <% end %>
          <% end %>
        <% end %>

        <% toolbar.with_section divide: :left, class: "flex-none relative z-10" do %>
          <%= lookbook_render :button_group do |group| %>
            <% if @engine.preview_embeds_allowed? %>
              <%= group.with_button id: "embed-generator-dropdown-button", icon: :code_2, tooltip: "Get embed code" do |button| %>
                <% button.with_dropdown.with_content(lookbook_render :embed_code_dropdown,
                  pages: @pages,
                  preview: @preview,
                  target: @target,
                  params: request.query_parameters,
                  policy: @config.preview_embeds.policy
                ) %>
              <% end %>
            <% end %>
            <% group.with_button id: "copy-preview-url-button",
              icon: :link,
              tooltip: "Copy preview URL",
              copy: true do %>
              <%= lookbook_inspect_url(@target.lookup_path, request.query_parameters) %>
            <% end %>
            
            <% group.with_button id: "refresh-preview-button",
              icon: :refresh_cw,
              tooltip: "Refresh preview",
              "x-on:click.stop": "startSpin(); $dispatch('viewport:reload'); stopSpin(500);" %>

            <% group.with_button id: "open-preview-button",
              icon: :external_link,
              href: lookbook_preview_path(@target.lookup_path, request.query_parameters),
              tooltip: "Open preview in new window",
              target: "_blank" %>

            <% group.with_button id: "show-vertical-drawer-button",
              icon: "sidebar",
              tooltip: "Show drawer",
              "x-on:click": "$store.inspector.drawer.hidden = false",
              class: "rotate-180",
              "x-show": "$store.inspector.drawer.hidden && vertical",
              cloak: true %>

            <% group.with_button id: "show-bottom-drawer-button",
              icon: "credit-card",
              tooltip: "Show drawer",
              "x-on:click": "$store.inspector.drawer.hidden = false",
              class: "rotate-180",
              "x-show": "$store.inspector.drawer.hidden && !vertical",
              cloak: true %>
          <% end %>
        <% end %>
      <% end %>

      <div class="h-full relative overflow-auto">
        <%= lookbook_render :tab_panels, alpine_data: "$store.inspector.main", id: "inspector-panels-main" do |tabs| %>
          <% @main_panels.each do |panel| %>
            <% tabs.with_panel name: panel.name do %>
              <%= lookbook_render :inspector_panel, name: panel.name do %>
                <%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
              <% end %>
            <% end %>
          <% end %>
        <% end %>
      </div>
    <% end %>

    <%= layout.with_pane class: "flex flex-col h-full overflow-hidden bg-lookbook-drawer-bg",
      "x-show": "!$store.inspector.drawer.hidden && #{@drawer_panels.any?}" do %>

      <%= lookbook_render :toolbar, id: "drawer-toolbar" do |toolbar| %>
        <% toolbar.with_section "x-bind:class": "layoutResizing && 'overflow-hidden'" do %>
          <%= lookbook_render :tabs, alpine_data: "$store.inspector.drawer", id: "inspector-tabs-drawer" do |tabs| %>
            <%= @drawer_panels.each do |panel| %>
              <% tabs.with_tab name: panel.name,
                label: panel.label,
                hotkey: panel.hotkey,
                disabled: panel.disabled %>
            <% end %>
          <% end %>
        <% end %>

        <% toolbar.with_section align: :right,  class: "flex-none relative z-10" do %>
          <%= lookbook_render :button_group do |group| %>
            <%= @drawer_panels.select { |p| !p.disabled && p.copy }.each do |panel| %>
              <% group.with_button id: "copy-panel-contents-button",
                icon: :copy,
                tooltip: "Copy panel contents",
                copy: !!panel.copy,
                "x-show": "$store.inspector.drawer.activeTab === '#{panel.name}'",
                cloak: true do %>
                <%= panel.copy ? panel.copy : "" %>
                <% end %>
            <% end %>  
          <% end %>
        <% end %>

        <% toolbar.with_section divide: :left, class: "flex-none relative z-10" do %>
          <%= lookbook_render :button_group do |group| %>

            <% group.with_button id: "drawer-to-right-button",
              icon: :sidebar_open,
              tooltip: "Pin drawer on right",
              "x-on:click": "switchOrientation",
              "x-show": "horizontal",
              "x-bind:class": "{'pointer-events-none opacity-50 !cursor-not-allowed': horizontal && layoutWidth <= $store.inspector.minVerticalSplitWidth}",
              cloak: true %>

            <% group.with_button id: "drawer-to-bottom-button",
              icon: :sidebar_open,
              tooltip: "Pin drawer on bottom",
              "x-on:click": "switchOrientation",
              "x-show": "vertical",
              class: "rotate-90",
              cloak: true %>

            <% group.with_button id: "hide-drawer-button",
              icon: :x_circle,
              tooltip: "Hide drawer",
              "x-on:click": "$store.inspector.drawer.hidden = true",
              cloak: true %>
          <% end %>
        <% end %>
      <% end %> 

      <div class="h-full overflow-auto">
        <%= lookbook_render :tab_panels, alpine_data: "$store.inspector.drawer", id: "inspector-panels-drawer" do |tabs| %>
          <% @drawer_panels.each do |panel| %>
            <% tabs.with_panel name: panel.name do %>
              <%= lookbook_render :inspector_panel, name: panel.name do %>
                <%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
              <% end %>
            <% end %>
          <% end %>
        <% end %>
      </div>
    <% end %>
  <% end %>
</main>
